<template>
  <div>
    <el-dialog
      :title="info.isAdd ? '商品添加' : '商品修改'"
      :visible.sync="info.isshow"
      width="50%"
      @opened="opened"
      ><div>form{{ form }}</div>
      <!-- <el-button @click="btn">查看</el-button> -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="一级分类">
          <!-- 对子组件接口进行传参 -->
          <el-select
            v-model="form.first_cateid"
            @change="catechild(form.first_cateid)"
          >
            <el-option
              v-for="item in catelist"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select v-model="form.second_cateid">
            <el-option
              v-for="item in catechildlist"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品名称">
          <el-input v-model="form.goodsname"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="市场价格">
          <el-input v-model="form.market_price"></el-input>
        </el-form-item>
        <!-- 图片 -->
        <el-form-item label="图片" label-width="80px">
          <!-- 上传文件 -->
          <div class="updata">
            <p class="jia">+</p>
            <input type="file" class="ipt" @change="changefile" />
            <img v-if="imgUrl" :src="imgUrl" alt="" />
          </div>
        </el-form-item>

        <el-form-item label="商品规格">
          <el-select v-model="form.specsid" @change="specschild">
            <el-option
              v-for="item in specslist"
              :key="item.id"
              :label="item.specsname"
              :value="item.id"
            ></el-option>
          </el-select>
          <!-- 规格的列表 -->
        </el-form-item>
        <el-form-item label="商品属性">
          <el-select v-model="form.specsattr" placeholder="请选择" multiple>
            <el-option
              v-for="item in specschildlist"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否新品">
          <el-radio v-model="form.isnew" :label="1">是</el-radio>
          <el-radio v-model="form.isnew" :label="2">否</el-radio>
        </el-form-item>

        <el-form-item label="是否热卖">
          <el-radio v-model="form.ishot" :label="1">是</el-radio>
          <el-radio v-model="form.ishot" :label="2">否</el-radio>
        </el-form-item>

        <el-form-item label="状态">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </el-form-item>

        <el-form-item label="商品描述">
          <div id="editor" v-if="info.isshow"></div>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="Add" v-if="info.isAdd">添加</el-button>
      <el-button type="primary" @click="xiugai" v-else>修改</el-button>
      <el-button type="info" @click="quxiao">取消</el-button>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import {
  reqgoodsadd,
  reqgoodsinfo,
  reqgoodsedit,
  reqcatelist,
  reqspecsinfo,
} from "../../../http/api";
import { successAlert, errorAlert } from "../../../utils/alert";
import E from "wangeditor";
import path from "path";
export default {
  props: ["info"],
  data() {
    return {
      imgUrl: "",
      catechildlist: [],
      specschildlist: [],
      form: {
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        price: "",
        market_price: "",
        img: "",
        description: "",
        specsid: "",
        specsattr: "",
        isnew: 1,
        ishot: 1,
        status: 1,
      },
    };
  },
  computed: {
    ...mapGetters({
      list: "goods/list",
      catelist: "cate/list",
      specslist: "specs/list",
    }),
  },
  mounted() {
    this.reqList();
    this.reqcate();
    this.reqspecs();
    this.reqTotal();
  },
  methods: {
    ...mapActions({
      reqList: "goods/reqList",
      reqcate: "cate/reqList",
      reqspecs: "specs/reqList",
      reqTotal: "goods/reqTotal",
    }),
    changefile(e) {
      let file = e.target.files[0];
      let imgArr = [".jpg", ".jpeg", ".png", ".gif"];
      let extname = path.extname(file.name);
      if (!imgArr.includes(extname)) {
        errorAlert("请上传正确的图片格式");
        return;
      }
      this.imgUrl = URL.createObjectURL(file);
      this.form.img = file;
    },
    /* 富文本编辑器 */
    opened() {
      this.editor = new E("#editor");
      this.editor.create();
      this.editor.txt.html(this.form.description);
    },
    /* 遍历分类子节点 */
    catechild() {
      this.form.second_cateid = "";
      reqcatelist({ pid: this.form.first_cateid }).then((res) => {
        if (res.data.code == 200) {
          this.catechildlist = res.data.list;
          // console.log(this.catechildlist);
        }
      });
    },
    //遍历规格的子节点
    specschild() {
      this.form.specsattr = [];
      reqspecsinfo({ id: this.form.specsid }).then((res) => {
        if (res.data.code == 200) {
          this.specschildlist = res.data.list[0].attrs;
        }
      });
    },
    //点了添加
    Add() {
      reqgoodsadd({
        ...this.form,
        specsattr: JSON.stringify(this.form.specsattr),
        description: this.editor.txt.html(),
      }).then((res) => {
        if (res.data.code == 200) {
          successAlert(res.data.msg);
          this.info.isshow = false;
          this.empty();
          this.reqList();
          this.reqTotal();
        }
      });
      /*  reqgoodsadd(this.form).then((res) => {
        if (res.data.code == 200) {
          successAlert(res.data.msg);
          this.reqList();
          this.info.isshow = false;
          this.empty();
        }
      }); */
    },

    //点了修改
    xiugai() {
      reqgoodsedit(this.form).then((res) => {
        if (res.data.code == 200) {
          successAlert(res.data.msg);
          this.reqList();
          this.empty();
          this.info.isshow = false;
           this.editor.txt.html(this.form.description);
        }
      });
    },
    // 方便查看
    /* btn() {
      console.log(this.catelist);
      console.log(this.specslist);
    }, */
    quxiao() {
      if (!this.info.isAdd) {
        this.empty();
      }
      this.info.isshow = false;
    },
    //定义一个空数组
    empty() {
      // 清空form
      this.form = {
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        price: "",
        market_price: "",
        img: null,
        description: "",
        specsid: "",
        specsattr: [],
        isnew: 1,
        ishot: 1,
        status: 1,
      };
      this.editor.txt.html("");
      // 清除图片地址
      this.imgUrl = "";
    },
    getOne(id) {
      //取回数据并对其进行操作
      reqgoodsinfo({ id: id }).then((res) => {
        if (res.data.code == 200) {
          successAlert(res.data.msg);
          this.form = res.data.list;
          this.form.id = id;

          reqcatelist({ pid: this.form.first_cateid }).then((res) => {
            if (res.data.code == 200) {
              this.catechildlist = res.data.list;
            }
          });
          reqspecsinfo({ id: this.form.specsid }).then((res) => {
            if (res.data.code == 200) {
              this.specschildlist = res.data.list[0].attrs;
            }
          });
          // this.form.specsattr = this.specschildlist.split(",");
          this.form.specsattr = this.form.specsattr.split(",");
          this.imgUrl = this.$pre + this.form.img;
        }
      });
      this.reqcate();
      this.reqspecs();
      if (this.editor) {
        this.editor.txt.html(this.form.description);
      }
    },
  },
};
</script>
<style scoped lang="less">
@import "../../../less/index.less";
.updata {
  width: 100px;
  height: 100px;
  border: 1px dashed @primary;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}
.jia {
  width: 100%;
  height: 100%;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  color: @primary;
}
.ipt {
  width: 100px;
  height: 100px;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 10;
}
img {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
</style>